<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="个人信息"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <div class="info-edit-box">
            <div class="input-name">性别</div>
            <select
                class="sex-select"
                v-model="sexType"
            >
                <option
                    value="default"
                    disabled
                >请选择您的性别</option>
                <option value='1'>男</option>
                <option value="2">女</option>
            </select>
        </div>

        <div
            class="save-btn"
            @click="saveInfo"
        >保存</div>
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
export default {
    name: 'UserName',
    components: {
        CommonHeader
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            sexType: 'default'
        }
    },
    methods: {
        saveInfo() {
            const that = this
            if (this.sexType == 'default') {
                this.commonDialog.alert('提示', '请输入您的性别!')
                return
            }
            let postData = this.qs.stringify({
                sex: this.sexType
            })
            this.axios
                .post('/api/user/info/update.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.commonDialog.alert(
                            '提示',
                            '保存成功！',
                            function() {
                                that.$router.push('/userInfo')
                            }
                        )
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        }
    }
}
</script>

<style lang="stylus" scoped>
.info-edit-box
    display flex
    align-items center
    padding 0.37rem
    background #fff
    .input-name
        width 1.5rem
        font-size 0.33rem
        color #333
    .sex-select
        flex 1
        appearance none
        background #fff
        font-size 0.33rem
        color #666
.save-btn
    position absolute
    bottom 0
    left 0
    right 0
    height 1.29rem
    line-height 1.29rem
    text-align center
    background #d7463c
    font-size 0.38rem
    color #fff
</style>


